<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Image Resize Tool</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css">
    <style>
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .upload-area {
            border: 2px dashed #e6e6e6;
            border-radius: 6px;
            padding: 30px;
            text-align: center;
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        .upload-area:hover {
            border-color: #1E9FFF;
            background-color: #f9f9f9;
        }
        .layui-form-item {
            margin-bottom: 20px;
        }
        .preview-img {
            max-width: 100%;
            max-height: 300px;
            display: none;
            margin: 15px auto;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="layui-icon layui-icon-picture"></i> Image Resize Tool</h1>
            <p>Upload and resize your images easily</p>
        </div>

        <form class="layui-form" action="/images/resize" method="post" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label class="layui-form-label">Select Image</label>
                <div class="layui-input-block">
                    <div class="upload-area" id="uploadArea">
                        <i class="layui-icon layui-icon-upload-drag" style="font-size: 48px; color: #c2c2c2;"></i>
                        <p>Click or drag image to this area to upload</p>
                        <input type="file" name="image" lay-verify="required" accept="image/*" class="layui-upload-file" id="imageFile">
                    </div>
                    <img id="preview" class="preview-img" alt="Image Preview">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">Scale Ratio</label>
                <div class="layui-input-block">
                    <input type="number" name="scale" value="0.5" step="0.1" min="0.1" max="1.0"
                           placeholder="Enter scale ratio" class="layui-input" lay-verify="required|number">
                    <div class="layui-form-mid layui-word-aux">Range: 0.1 - 1.0</div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">Format</label>
                <div class="layui-input-block">
                    <select name="formatter" lay-verify="required">
                        <option value="jpg">JPG</option>
                        <option value="png">PNG</option>
                        <option value="webp">WebP</option>
                        <option value="gif">GIF</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-lg layui-btn-normal" lay-submit lay-filter="resizeForm">
                        <i class="layui-icon layui-icon-play"></i> Resize & Download
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-lg">
                        <i class="layui-icon layui-icon-refresh"></i> Reset
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
    <script>
        layui.use(['form', 'upload'], function(){

            // 点击上传区域触发文件选择
            document.getElementById('uploadArea').addEventListener('click', function() {
                document.getElementById('imageFile').click();
            });

            // 图片预览功能
            document.getElementById('imageFile').addEventListener('change', function(e) {
                var file = e.target.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var preview = document.getElementById('preview');
                        preview.src = e.target.result;
                        preview.style.display = 'block';
                    }
                    reader.readAsDataURL(file);
                }
            });

            // 拖拽上传功能
            var uploadArea = document.getElementById('uploadArea');

            // 阻止拖拽时的默认行为
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                uploadArea.addEventListener(eventName, function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                });
            });

            // 拖拽进入区域样式变化
            ['dragenter', 'dragover'].forEach(eventName => {
                uploadArea.addEventListener(eventName, function(e) {
                    this.style.borderColor = '#1E9FFF';
                    this.style.backgroundColor = '#f0f9ff';
                });
            });

            // 拖拽离开区域样式恢复
            ['dragleave'].forEach(eventName => {
                uploadArea.addEventListener(eventName, function(e) {
                    this.style.borderColor = '#e6e6e6';
                    this.style.backgroundColor = '';
                });
            });

            // 处理拖拽放置事件
            uploadArea.addEventListener('drop', function(e) {
                var file = e.dataTransfer.files[0];
                if (file && file.type.match('image.*')) {
                    // 创建一个新的FileList对象并赋值给input
                    var dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    document.getElementById('imageFile').files = dataTransfer.files;

                    // 触发change事件以显示预览
                    var event = new Event('change');
                    document.getElementById('imageFile').dispatchEvent(event);

                    // 恢复样式
                    this.style.borderColor = '#e6e6e6';
                    this.style.backgroundColor = '';
                } else {
                    alert('Please drop an image file!');
                }
            });

            // 监听重置按钮点击事件
            document.querySelector('[type="reset"]').addEventListener('click', function(e) {
                // 延迟执行以确保表单重置完成
                setTimeout(function() {
                    // 隐藏预览图片
                    var preview = document.getElementById('preview');
                    preview.style.display = 'none';
                    preview.src = '';

                    // 重置上传区域样式
                    var uploadArea = document.getElementById('uploadArea');
                    uploadArea.style.borderColor = '#e6e6e6';
                    uploadArea.style.backgroundColor = '';
                }, 10);
            });
        });
    </script>
</body>
</html>
